<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<html>
<head>
    <title>登录页</title>
    <%--echart线图、柱状图、饼图等各种图型库 cdn--%>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <%--jquery cdn--%>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
${error}
<form action="/login.do">
    <input id="uuid" type="hidden" name="uuid"><br>
    手机号 <input name="phone"><br>
    图片验证码 <input name="picCode"> <img id="img" src="" onclick="changeUrl()"><br>
    短信验证码 <input name="phoneCode"> <input type="button" onclick="sendCode()" value="发送验证码"><br>
    <input type="submit" value="登录"><br>

</form>

</body>
<script>
    let uuid = guid();
    document.getElementById('uuid').value=uuid;
    changeUrl();

    function changeUrl(){
        document.getElementById('img').src = 'http://localhost:8080/picCode.do?uuid=' + uuid + '&time=' + new Date().getTime();
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    function sendCode() {
        let phone = $('[name=phone]').val();
        $.ajax({

            url: '/sendCode.do?phone=' + phone,
            success: function (data) {

                if (data) {
                    alert('发送成功')
                }
            }
        })
    }


</script>
</html>